<!-- 选择挂账账户的弹窗组件 -->
<template>
  <div>
    <CustomDrawer v-model:showDrawer="visible" title="选择挂账账户">
      <el-form label-position="left" label-width="100px">
        <template v-if="payCreditType == 1">
          <el-form-item label="选择账户类型">
            <el-radio-group v-model="radioPayType">
              <el-radio :label="1">一级账户</el-radio>
              <el-radio :label="2" :disabled="!selectPayCreditId">
                二级账户
                <span v-if="!selectPayCreditId && radioPayType == 1">（请先选择一级账户）</span>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="一级账户" v-if="radioPayType == 1">
            <el-select class="select" v-model="selectPayCreditId" placeholder="请选择挂账账户">
              <el-option
                v-for="item in payCreditList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级账户" v-if="radioPayType == 2">
            <el-select class="select" v-model="selectPayCreditId" placeholder="请选择挂账账户">
              <el-option
                v-for="item in payCreditChildrenList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </template>

        <el-form-item label="账户" v-if="payCreditType == 2">
          <el-select class="select" v-model="selectPayCreditId" placeholder="请选择挂账账户">
            <el-option
              v-for="item in payCreditList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: 200px">
          <el-button @click="handleCancel">取消</el-button>
          <el-button
            style="margin-left: 50px; background-color: #7b0a03; color: #fff"
            @click="handleConfirm"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </CustomDrawer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import CustomDrawer from '@/components/CustomDrawer/Index.vue'
import { creditBillList } from '@/api/pay'
import { dealAssignDataFunction } from '@/utils/toolsValidate'

interface Props {
  isShowDialog: boolean
  payCreditType: number // 区分挂账账户类型： 1:企业   2：个人
}

interface Emits {
  (e: 'update:isShowDialog', value: boolean): void
  (e: 'confirm', data: any): void
}

const props = withDefaults(defineProps<Props>(), {
  isShowDialog: false,
  payCreditType: 1
})

const emit = defineEmits<Emits>()

// 挂账一级账户列表
const payCreditList = ref([])
// 挂账二级账户列表
const payCreditChildrenList = ref([])
// 选中的挂账账户id
const selectPayCreditId = ref(null)
// 选择账户类型
const radioPayType = ref(1)

const visible = computed({
  get: () => props.isShowDialog,
  set: val => emit('update:isShowDialog', val)
})

watch(visible, val => {
  if (val) {
    selectPayCreditId.value = null
    getCreditList()
  }
})

// 每次切换账户类型，都要重置选中的挂账账户id
watch(radioPayType, () => {
  selectPayCreditId.value = null
})

watch(selectPayCreditId, val => {
  if (radioPayType.value == 1 && val) {
    getCreditSubAccountList(val)
  }
})

// 挂账账户列表
const getCreditList = async () => {
  const datas = { type: props.payCreditType }
  try {
    const res = await creditBillList(datas)
    if (res.status == 200) {
      // 一级账户
      payCreditList.value = dealAssignDataFunction([], res?.data?.list)
    }
  } catch (error) {
    console.error('获取挂账账户列表失败:', error)
  }
}

// 挂账账户的子账户列表
const getCreditSubAccountList = async (id: any) => {
  const datas = { type: props.payCreditType }
  try {
    const res = await creditBillList(datas)
    if (res.status == 200) {
      // 二级账户
      let dataList = dealAssignDataFunction([], res?.data?.list)
      dataList.forEach((val: any) => {
        if (val.id == id) {
          payCreditChildrenList.value = val.account_list
        }
      })
    }
  } catch (error) {
    console.error('获取挂账子账户列表失败:', error)
  }
}

// 确认
const handleConfirm = () => {
  if (!selectPayCreditId.value) {
    ElMessage.warning('请先选择挂账账户')
    return
  }
  if (props.payCreditType == 1 && radioPayType.value != 2) {
    ElMessage.warning('企业挂账必须选择二级账户')
    return
  }
  const datas = {
    // 账户id
    selectPayCreditId: selectPayCreditId.value,
    //账户类型(0:主账户 个人挂账， 1:子账户 企业挂账)
    payType: props.payCreditType == 1 ? 1 : 0
  }
  emit('confirm', datas)
  emit('update:isShowDialog', false)
}

// 取消
const handleCancel = () => {
  emit('update:isShowDialog', false)
}
</script>

<style lang="scss" scoped>
.select {
  width: 300px;
}
</style>
